<template>
<!--  <div class="myDialog commonMimiDialog">-->
    <el-dialog
      class="commonMimiDialog"
      :modal="false"
      v-if="showDialog"
      :visible.sync="showDialog"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :width="typeof width == 'string' ? width : width+'%'"
      :modal-append-to-body="modalAppendToBody"
      :append-to-body="false"
      :custom-class="customClass"
      v-dialogDrag
    >
      <!-- 顶部标题区域 -->
      <template #title>
            <span class="titleName">
              <strong>{{ title }}</strong>
            </span>
        <i class="el-icon-close" @click="closeDialog"></i>
      </template>
      <!-- 内容区域 -->
      <div class="miniBodyContent">
        <div class="readonlyModel" v-if="readonly"></div>
        <slot name="content"></slot>
      </div>
      <!-- 底部按钮区域(晶上自动布局注释底部内容) -->
      <!--      <template #footer>-->
      <!--        <div v-if="showFooter">-->
      <!--          <el-button size="small" plain type="info" @click="closeDialog">取 消</el-button>-->
      <!--          <el-button size="small" plain type="primary" :loading="loading" @click="sure">确 定</el-button>-->
      <!--        </div>-->
      <!--        <div v-else>-->
      <!--          <el-button size="small" v-for="(item,index) in footBtn" :key="'button_'+index"-->
      <!--                     :plain="item.plain" :icon="item.icon" :type="item.type" @click="item.click()">-->
      <!--            {{ item.name }}-->
      <!--          </el-button>-->
      <!--        </div>-->
      <!--      </template>-->
    </el-dialog>
<!--  </div>-->
</template>
<script>
import baseComp from './baseComp'

export default {
  name: 'commonMiniDialog',
  extends: baseComp,
  props: {
    title: {
      type: String,
      default: () => '',
    },
    add: {
      type: Boolean,
      default: () => false,
    },
    width: {
      type: [String, Number],
      default: () => '40%'
    },
    modalAppendToBody: {
      type: Boolean,
      default: () => true
    },
    showFooter: {
      type: Boolean,
      default: () => false
    },
    footBtn: {
      type: Array,
      default: () => {
        return []
      }
    },
    customClass: {
      type: String,
      default: 'dialogMini'
    },
    readonly: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {
    add: {
      handler(newVal, oldVal) {
        this.showDialog = newVal
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.loadTheme(this.$options.name);
  },
  mounted(){

  },
  data() {
    return {
      isShow: true,
      loading: false,
      showDialog: false
    }
  },
  methods: {
    closeDialog() {
      let _this = this
      this.showDialog = false
      let cd = this.$parent.closeDialog;
      if(cd && typeof cd == 'function'){
        this.$parent.closeDialog("commonMiniDialog")
      }else{
        _this.$emit('closeMiniDialog', false)
      }
    },
    // 确定
    sure() {
      let _this = this
      _this.$emit('sureMini')
    },
    /**
     * 开启加载等待状态
     */
    openLoading() {
      this.loading = true
      this.$set(this, 'loading', true)
    },
    /**
     * 关闭加载按钮等待状态
     */
    closeLoading() {
      this.loading = false
    },
  },
}
</script>
<style lang="less" scoped>
.miniBodyContent{
  position: relative;
  .readonlyModel{
    position: absolute;
    z-index: 1994;
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
